<template>
	<view class="index-content">
		<common-header class="header"></common-header>
		<up-tabs 
		class="u-tabbar"
		:list="topBar" 
		:current="current"
		lineColor="#467de0"
		:activeStyle="{
			color: '#467de0',
			fontWeight: 'bold'
		}"
		:inactiveStyle="{
			color: '#9c9c9c'
		}"
		 @click="changeTab">
		 </up-tabs>
		<swiper :current="current" class="swiper" :duration="500" @change="swiperChange" :style="'height:'+swiperHeight+'px'">
			<swiper-item>
				<keep-alive><recommend  ref="courseCom0" :swiperHeight="swiperHeight"></recommend></keep-alive>
			</swiper-item>
			<swiper-item >
				<free-course  ref="courseCom1" :swiperHeight="swiperHeight"></free-course>
			</swiper-item>		
			<swiper-item>
				<actual-combat-cource ref="courseCom2" :swiperHeight="swiperHeight"></actual-combat-cource>
			</swiper-item>
		</swiper>
	</view>
	
</template>

<script setup>
import {reactive,ref,nextTick} from 'vue'
import { onReady} from "@dcloudio/uni-app"
import {getViewHeight} from '../../utils/data.js'
import commonHeader from '../../components/common/common-header.vue'
import recommend from '../../components/home/recommend.vue'
import freeCourse from '../../components/home/free-course.vue'
import actualCombatCource from '../../components/home/actual-combat-cource.vue'
const topBar = reactive([
	{name: '今日推荐'},
	{name: '免费课程'},
	{name: '实战课程'}
])
const courseCom0 = ref(null)
const courseCom1 = ref(null)
const courseCom2 = ref(null)
const current = ref(0)
const swiperHeight = ref(0)
const changeTab = (item)=>{
  current.value = item.index
}
const swiperChange = (item)=>{
  init(item.detail.current)
}
const init = (index) => {
	if (current.value !== index) {
		current.value = index
	}
	nextTick(()=>{
		if (index == 0) {
			courseCom0.value.initList()
		}
			
		if (index == 1) {
			courseCom1.value.initList()
		}
		if (index == 2) {
			courseCom2.value.initList()
		}
	})
	
}
onReady(()=>{
	swiperHeight.value = getViewHeight('.header','.u-tabbar')
	nextTick(()=>{
		if (current.value == 0) {
			courseCom0.value.initList()
		}
	})
})

</script>

<style lang="scss">
	
</style>
